import {ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';

import {SliderStyle} from '../../../../../data-types/slider.types';

@Component({
  selector: 'app-slider-handle',
  template: `
    <div class="slider-handle" [ngStyle]="style"></div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SliderHandleComponent implements OnInit, OnChanges {

  @Input() vertical = false;

  @Input() offset: number;

  public style: SliderStyle;

  constructor() {
    this.style = {};
  }

  ngOnInit(): void {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.offset) {
      this.style[this.vertical ? 'bottom' : 'left'] = this.offset + '%';

    }
  }

}
